<template>
  <div class="CultureInfo">
    <div class="CultureInfo-left">
      <div class="CultureInfo-left-search">
        <el-input v-model="queryParams.description" placeholder="请输入项目描述查询"></el-input>
        <div class="CultureInfo-left-search-button" @click="handleQuery">
          <img alt="" src="@/assets/image/搜索.png">
        </div>
        <div class="CultureInfo-left-search-button" @click="handleReset">
          <img alt="" src="@/assets/image/5_重置.png">
        </div>
      </div>
      <br>
      <div>
        <el-row>
          <el-col v-for="(item,index) in cultureProject" :key="index" :offset="index > 0 ? 2 : 0" :span="11"
                  style="position: relative;margin: 15px">
            <el-card v-if="item.status === 0" :body-style="{ padding: '0px' }" @click.native="queryDetail(item.id)">
              <br>
              <img alt="" class="bookmark" src="@/assets/image/书签.png">
              <div v-if="item.imgUrl">
                <el-image
                    :src="item.imgUrl"
                    class="image"
                    style="width: 300px;
                  height: 200px;
                  margin: 0 auto;
                  border-radius: 10px">
                </el-image>
              </div>
              <el-empty v-else description="无图片"></el-empty>
              <div class="CultureInfo-left-project-detail">
                <div>
                  <img alt="" src="@/assets/image/项目.png">
                  <span style="font-size: 20px;font-weight: 700;"> 非遗项目名：</span>
                  <span>{{ item.name }}</span>
                </div>
                <br>
                <div style=" width: 350px;
                            height: 25px;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;">
                  <img alt="" src="@/assets/image/行程描述.png">
                  <span> 项目描述：</span>
                  <span>{{ item.description }}</span>
                </div>
                <br>
                <div>
                  <img alt="" src="@/assets/image/地址.png">
                  <span> 项目地址：</span>
                  <span>{{ item.location }}</span>
                </div>
                <br>
                <div class="bottom clearfix">
                  <time class="time">{{ item.createdAt }}</time>
                  <el-button class="button" type="text">查看详细</el-button>
                </div>
              </div>
            </el-card>
            <br>
          </el-col>
        </el-row>

      </div>
      <div v-loading="loading" class="loadMore"
           @click="handleLoad">
        <img alt="" src="@/assets/image/加载.png">
        <span>加载更多...</span>
      </div>
    </div>
    <div class="CultureInfo-right">
      <div class="CultureInfo-right-content">
        <div class="CultureProjectTotal">
          <img alt="" src="@/assets/image/zixun.png">
          <span> 非遗项目总数:</span>
          <vue-count-to :duration="2000" :endVal="total" :startVal="0" style="color: red;font-weight: bold;
            font-style: italic;"></vue-count-to>
        </div>
        <el-divider/>
        <div class="CultureProjectCategory">
          <span class="CultureInfo-right-content-title">
            <img alt="" src="@/assets/image/分类.png">文化分类
          </span>
        </div>
        <br>
        <div>
          <el-tag
              v-for="(item,index) in cultureProjectCategory"
              style="line-height: 15px"
              :key="index"
              :type="getRandomTagType()"
              effect="dark"
          >
            {{ item.categoryName }}({{ item.categoryCount }})
          </el-tag>
        </div>
        <div class="leave-a-message">
          <span class="CultureInfo-right-content-title">
            <img alt="" src="@/assets/image/留言板.png">留言板
          </span>
          <el-input
              v-model="commentText"
              :rows="4"
              placeholder="请输入您的留言"
              type="textarea"
          >
          </el-input>
          <el-button type="primary" @click="submitLeaveMessage">提交留言</el-button>
        </div>
        <br>
        <el-row v-for="(item,index) in leaveAMessageInfo" :key="index" :gutter="20" class="leave-a-message-content"
                type="flex">
          <el-col :lg="6" :md="6" :sm="12" :xl="6" :xs="24" align="middle">
            <el-image :src="item.imageUrl || avatar" style="border-radius: 50%;width: 50px;height: 50px"></el-image>
            <div style="font-size: 10px" v-html="item.username"></div>
          </el-col>
          <el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="24" align="middle" style=" overflow: hidden;
                            height: 55px;
                           text-overflow: ellipsis;">
            <el-tooltip :content="item.content" class="item" effect="dark" placement="top"
                        popper-class="my-tooltip" style="font-size: 10px;text-align: left">
              <div v-html="item.content"></div>
            </el-tooltip>
          </el-col>
          <el-col :lg="6" :md="6" :sm="12" :xl="6" :xs="24" align="middle">
            <div style="font-size: 10px" v-html="new Date(item.createTime).toLocaleString()"></div>
          </el-col>
        </el-row>
        <div v-loading="loadingMessage" class="loadMessage"
             @click="handleLoadMessage">
          <img alt="" src="@/assets/image/加载.png">
          <span>加载更多...</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  queryCulture,
  queryCultureCategory,
  queryLeaveMessage,
  submitLeaveMessage
} from "@/api/request/CultureCommunityRequest";
import VueCountTo from 'vue-count-to';

export default {
  name: "CultureInfoView",
  components: {
    VueCountTo
  },
  data() {
    return {
      total: 0,
      userInfo: {},
      cultureProject: [],
      loading: false,
      loadingMessage: false,
      cultureProjectCategory: [],
      tagTypes: ['', 'success', 'info', 'warning', 'danger'],
      avatar: require('@/assets/image/no_image.png'),
      commentText: '',
      leaveAMessageInfo: [],
      queryParams: {
        currentPage: 1,
        pageSize: 10,
        description: null
      },
      leaveMessageParams: {
        currentPage: 1,
        pageSize: 5,
        description: null
      }
    }
  },
  methods: {
    submitLeaveMessage() {
      if (!this.userInfo) {
        this.$message.warning('请先登录');
        return;
      }

      if (!this.commentText.trim()) {
        this.$message.warning('请输入留言内容');
        return;
      }

      submitLeaveMessage({userId: this.userInfo.id, content: this.commentText}).then(res => {
        if (res.code !== 200) {
          this.$message.error(res.msg);
          return;
        }
        this.commentText = ''; // 清空输入框
        this.getLeaveMessage()
        this.$message.success('留言提交成功');
      }).catch(error => {
        console.log(error)
      });
    },
    getList() {
      this.loading = true
      queryCulture(this.queryParams).then(res => {
        if (res.code !== 200) {
          this.$message.error(res.msg);
          return;
        }
        this.loading = false
        this.total = res.data.total;
        this.cultureProject = res.data.list;
        queryCultureCategory().then(res => {
          if (res.code !== 200) {
            this.$message.error(res.msg);
            return;
          }
          this.cultureProjectCategory = res.data;
        });
      }).catch(error => {
        console.log(error)
      });
    },
    getLeaveMessage() {
      this.loadingMessage = true
      queryLeaveMessage(this.leaveMessageParams).then(res => {
        if (res.code !== 200) {
          this.$message.error(res.msg);
          return;
        }
        this.loadingMessage = false
        this.leaveAMessageInfo = res.data.list;
      }).catch(error => {
        console.log(error)
      });
    },
    getRandomTagType() {
      const randomIndex = Math.floor(Math.random() * this.tagTypes.length);
      return this.tagTypes[randomIndex];
    },
    queryDetail(id) {
      this.$router.push({
        path: '/CultureInfoDetail',
        query: {
          id: id
        }
      });
    },
    handleLoad() {
      this.queryParams.pageSize += 5;
      this.getList();
    },
    handleLoadMessage() {
      this.leaveMessageParams.pageSize += 5;
      this.getLeaveMessage()
    },
    handleQuery() {
      this.getList();
    },
    handleReset() {
      this.queryParams = {
        currentPage: 1,
        pageSize: 10,
        description: null
      }
      this.getList();
    }
  },
  mounted() {
    this.getList();
    this.getLeaveMessage();
    this.userInfo = JSON.parse(localStorage.getItem('xm-user'))
  }
}
</script>

<style scoped>
.CultureInfo {
  background: linear-gradient(135deg, #f5f2e9 0%, #e8e1d1 100%);
  padding: 30px;
}

.CultureInfo-left-search input {
  height: 55px;
  width: 500px;
  border-radius: 10px;
  border-radius: 25px;
  background-color: #ffffff;
  border: 2px solid #d4b36a;
  font-size: 16px;
  padding-left: 20px;
}

.CultureInfo-left-search-button {
  background-color: #d4b36a !important;
  border-radius: 25px !important;
  padding: 0 30px !important;
  transition: all 0.3s ease !important;
}

.CultureInfo-left-search-button:hover {
  background-color: #b89a5a !important;
  transform: scale(1.05);
}

.el-card {
  cursor: pointer;
  background: url("@/assets/image/bj.png") no-repeat;
  background-size: contain;
  text-align: center;
  border: 1px solid #d4b36a;
  border-radius: 15px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.el-card:hover {
  cursor: pointer;
  box-shadow: 2px 2px 15px 0 #787878;
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.bookmark {
  position: absolute;
  width: 60px;
  left: 0;
  top: 0;
  width: 80px;
  filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.1));
}

.el-tag {
  border-radius: 15px;
  padding: 8px 15px;
  font-size: 14px;
  background-color: #f5f2e9;
  border: 1px solid #d4b36a;
  color: #5a4a42;
  margin: 5px;
  transition: all 0.3s ease;
}

.el-tag:hover {
  background-color: #d4b36a;
  color: #ffffff;
  transform: scale(1.05);
}

.leave-a-message {
  background-color: #ffffff;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.leave-a-message .el-textarea__inner {
  border-radius: 10px;
  border: 1px solid #d4b36a;
}

.leave-a-message .el-button {
  background-color: #d4b36a;
  border-color: #d4b36a;
  border-radius: 25px;
  font-size: 16px;
  transition: all 0.3s ease;
}

.leave-a-message .el-button:hover {
  background-color: #b89a5a;
  transform: scale(1.05);
}

.loadMore, .loadMessage {
  background-color: #d4b36a !important;
  border-radius: 25px !important;
  font-size: 18px !important;
  color: #ffffff !important;
  transition: all 0.3s ease !important;
}

.loadMore:hover, .loadMessage:hover {
  background-color: #b89a5a !important;
  transform: scale(1.05);
}

.CultureProjectTotal {
  background-color: #ffffff;
  border-radius: 15px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 20px;
  color: #5a4a42;
}

.CultureInfo-right-content {
  background-color: #ffffff;
  border-radius: 15px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.my-tooltip {
  width: 200px !important;
}
</style>

<style lang="scss" scoped>
.CultureInfo {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 20px; // 增加左右两栏之间的间距

  .CultureInfo-right-content-title {
    font-size: 18px;
    font-weight: 700;
    padding: 10px 0;
    display: flex;
    align-items: center;
    justify-content: center;

    img {
      width: 25px;
      height: 25px;
    }
  }

  .CultureProjectTotal {
    box-shadow: 2px 2px 15px 0 #d5dceb;
    font-size: 20px;
    font-weight: 700;
    border-radius: 10px;
    padding: 10px;
    text-align: center;
  }

  .CultureProjectTotal img, span {
    vertical-align: middle;
  }

  .CultureProjectCategory {
    font-size: 20px;
    font-weight: 700;
    text-align: center;
  }

  .CultureProjectCategory i, span {
    vertical-align: middle;
  }

  .el-tag {
    margin: 5px;
  }

  .CultureInfo-left {
    background-color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 10px;
    padding: 20px;
    border-radius: 10px;
    transition: all .5s;
    width: 800px;

    .CultureInfo-left-search {
      display: flex;
      align-items: center;
      gap: 10px; // 增加搜索按钮之间的间距

      .CultureInfo-left-search-button {
        background-color: #4f9bfe;
        padding: 0 40px;
        padding: 0 20px;
        border-radius: 10px;
        cursor: pointer;
        transition: all .5s;
        margin: 0 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 55px;
      }

      .CultureInfo-left-search-button:hover {
        background-color: #3086f6;
      }
    }

    .CultureInfo-left-project-detail {
      text-align: left;
      padding: 14px;
    }

    .CultureInfo-left-project-detail img, span {
      vertical-align: middle;
    }

    .CultureInfo-left-project-detail img {
      width: 25px;
      height: 25px;
    }

    .time {
      font-size: 13px;
      color: #999;
    }

    .bottom {
      margin-top: 13px;
      line-height: 12px;
    }

    .button {
      padding: 0;
      float: right;
    }

    .image {
      width: 100%;
      display: block;
    }

    .clearfix:before,
    .clearfix:after {
      display: table;
      content: "";
    }

    .clearfix:after {
      clear: both
    }

    .loadMore {
      background-color: #5b98fd;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      font-weight: 700;
      transition: all .5s;
      cursor: pointer;
      padding: 10px;
      margin-top: 20px;
    }

    .loadMore:hover {
      background-color: #3086f6;
      color: white;
    }
  }

  .CultureInfo-right {
    width: 300px;
    border-radius: 10px;
    transition: all .5s;
    margin: 0 10px;

    .CultureInfo-right-content {
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      border-radius: 10px;
      background-color: white;
      padding: 10px;
      padding: 20px;
      transition: all .5s;
    }

    .leave-a-message {
      margin-top: 20px;
      padding: 10px;
      border-top: 1px solid #eaeaea;

      h3 {
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 10px;
      }

      .el-input {
        margin-bottom: 10px;
      }

      button {
        width: 100%;
        margin-top: 10px;
      }
    }

    .el-carousel__item h3 {
      color: #475669;
      font-size: 14px;
      opacity: 0.75;
      line-height: 150px;
      margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
      background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n+1) {
      background-color: #d3dce6;
    }

    .link img {
      background-color: #e5e5e5;
      border-radius: 50%;
      padding: 10px;
      width: 40px;
      height: 40px;
      transition: all .5s;
      cursor: pointer;
    }

    .link img:hover {
      background-color: #cccccc;
    }

    .leave-a-message-content {
      margin: 10px 0;
      align-items: center;
      border: 1px dashed #cccccc;
      border-radius: 10px;
      padding: 10px;
    }

    .loadMessage {
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      padding: 10px;
      background-color: #4483f5;
      border-radius: 10px;
      transition: all .5s;
      margin-top: 20px;

      img {
        width: 20px;
      }
    }

    .loadMessage:hover {
      background-color: #4482f5;
      color: white;
    }
  }

  .CultureInfo-left:hover,
  .CultureInfo-right-content:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
  }
}
</style>

